<template>
	<main>
		<b-carousel
				id="carousel-1"
				v-model="bannerIndex"
				:interval="4000"
				img-width="1000"
				img-height="360"
		>
			<b-carousel-slide :img-blank="true" img-blank-color="#fff" v-for="(item, key) in banner" :key="key">
				<div class="container">
					<div class="left">
						<div class="boll">
							<ul>
								<li class="boll-li"></li>
								<li class="boll-li"></li>
								<li class="boll-li"></li>
								<li class="boll-li"></li>
							</ul>
						</div>
						<ul class="desc">
							<li><h1>{{item.title}}</h1></li>
							<li><p>{{item.desc}}</p></li>
							<li>
								<button>了解更多 -></button>
							</li>
						</ul>
					</div>
					<div class="right">
						<img :src='item.thumb' alt="">
					</div>
				</div>
			</b-carousel-slide>
		</b-carousel>

		<b-container class="menu" fluid="xl">
			<b-row>
				<b-col v-for="(item, key) in menu" :key="key" style="margin-left: 40px" class="col-border" @mouseout="bannerIndex = key">
					<div class="border-li" :class="bannerIndex === key ? 'active' : ''"></div>
					<b-row class="img">
						<b-col v-for="(i, k) in item.images" :key="k">
							<img :src="i" alt="">
						</b-col>
					</b-row>

					<h6>{{item.title}}</h6>
					<p>{{item.desc}}</p>
				</b-col>
			</b-row>
		</b-container>
	</main>
</template>

<script>
	export default {
		name: "banner",
		data () {
			return {
				banner: [
					{
						title: '国际专用网络，' + "\n" + '连接全球，' + "\n" + '沟通世界。',
						desc: '依托国内诸多运营商的全球网络服务提供商' + "\n" + '释放智能管道能力，提升端到端服务体验。',
						thumb: require('../../assets/Slice.png')
					},
					{
						title: '应用与平台访问，' + "\n" + '加速，释放员工，' + "\n" + '潜力。',
						desc: '快速访问GitHub、Slack、Salesforce' + "\n" + '等开发与团队沟通程序，提升团队效率。',
						thumb: require('../../assets/banner2.png')
					},
					{
						title: '通过花卷网络连，' + "\n" + '通多云平台，跨' + "\n" + '云资源调度。',
						desc: '帮助客户连通在多个云服务平台的数据、网' + "\n" + '络及其他资源。内网互通，稳定易用',
						thumb: require('../../assets/banner2.png')
					},
					{
						title: '专用网络构建跨，' + "\n" + 'APAC，' + "\n" + '区域大内网。',
						desc: '利用专用网络构建APAC' + "\n" + '区域大内网，两侧会员通过大内网交换流量。',
						thumb: require('../../assets/banner4.png')
					}
				],
				menu: [
					{
						images: [require('../../assets/gmail.png'), require('../../assets/whatsapp.png'), require('../../assets/video.png')],
						title: '国际专线',
						desc: '与海外供应商保持联络，访问海外资产如本地一般顺畅。'
					},
					{
						images: [require('../../assets/m.png'), require('../../assets/video.png'), require('../../assets/slack.png')],
						title: '访问加速',
						desc: '优化与全球数千家开发与办公应用等内容提供商访问速度与延迟。'
					},
					{
						images: [require('../../assets/google-cloud.png'), require('../../assets/azure.png'), require('../../assets/Amazon_Web_Services_Logo.png')],
						title: '云间互联',
						desc: '打通并联接 AWS、Azure、GCP、阿里云等全球领先的公有云平台。'
					},
					{
						images: [require('../../assets/web-site.png')],
						title: '花卷交换中心',
						desc: '利用专用网络构建跨 APAC 区域大内网，会员通过大内网交换流量。'
					}
				],
				bannerIndex: 0
			}
		}
	}
</script>

<style scoped lang="scss">
	main {
		margin-top: 40px;

		.container {
			display: flex;

			.left {
				display: flex;

				.boll {
					ul {
						position: relative;
						top: 50%;
						margin: -108px auto;

						.boll-li {
							width: 18px;
							height: 18px;
							border-radius: 18px;
							margin-bottom: 12px;
						}

						.boll-li:first-child {
							background: #CE5B4D;
						}

						.boll-li:nth-child(2) {
							background: #F8CE5E;
						}

						.boll-li:nth-child(3) {
							background: #4B9E65;
						}

						.boll-li:nth-child(4) {
							background: #598CEE;
						}
					}
				}

				.desc {
					flex: 1;
					margin: 100px 0 0 50px;
					width: 486px;
					white-space: pre;

					h1 {
						color: #222222;
						font-size: 68px;
						font-weight: 400;
						line-height: 80px;
					}

					li:nth-child(2) {
						color: #000;
						margin: 20px 0;
					}

					li:last-child {
						button {
							color: #ffffff;
							font-size: 18px;
							font-weight: 400;
							line-height: 27px;
							width: 256px;
							height: 60px;
							border-radius: 30px;
							background: #3553e2;
							outline: none;
							border: none;
						}
					}
				}
			}
			.right {
				img {
					width: 100%;
				}
			}
		}

		.menu {
			margin-top: 40px;

			.row {
				.col-border {
					.border-li {
						width: 100%;
						height: 3px;
						border-radius: 3px;
						background: #979797;
						position: relative;
					}
					.active {
						transition: all .2s;
					}
					.active::before {
						content: '';
						position: absolute;
						left: 0;
						top: 0;
						width: 50%;
						height: 3px;
						border-radius: 3px;
						background: #3553e2;
					}

					.img {
						margin: 50px 0;
					}

					h6 {
						margin-bottom: 50px;
						color: #222;
						font-size: 22px;
					}

					p {
						font-size: 18px;
						color: #222;
					}
				}
			}
		}
	}
</style>
